<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST : </title>
    <link rel="stylesheet" href="./flora.dialog.css" type="text/css" media="screen" title="Flora (Default)">
    <style>
      body {
        font-size:11px;
      }
    </style>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/ui/jquery.ui.all.packed.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

          $('.external').bind('click', function() {

            link = $(this).attr('href');
            title = "External Link";


            html= '<div style="display:none" class="ui-dialog-container">';
            html+= '<div class="ui-dialog-content" id="dialogContent" title="'+title+'">';
            html+= 'This link ('+link+') open another site, proceed?';
            html+= '</div>';
            html+= '</div>';
            html+= '<div class="ui-dialog-buttonpane" style="display:none">';
            html+= '<button>Hans</button>';
            html+= '<button>Cancel</button>';
            html+= '</div>';

            $(html).appendTo($('body'));

            var dOffset = $('#dialogContent').offset();
            $('#dialogContent').dialog({
              buttons: {
                  'Okay': function() {
                            $('#dialogContent').dialog('close');
                            $('#dialogContent').remove();
                            location.replace(link);
                          },
                  'Cancel': function() {
                            $('#dialogContent').dialog('close');
                            $('#dialogContent').remove();
                            return false;
                          }
              },
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5
              },
              modal : true,
              autoResize : true
            });

            return false;
          });

          function modal_dialog(title, contenuto) {

          }

        });
    </script>
</head>
<body>
<a href="http://www.google.com" class="external">Link with confirmation 1</a>
<br />
<a href="http://www.gianiaz.net" class="external">Link with confirmation 2</a>
<br />
<a href="http://www.yahoo.com">Link without confirmation</a>
</body>
</html>



